<% presenter = Users::Sessions::NewPresenter.new(self) %>
<% content_for(:head) do %>
  <title><%= presenter.page_title %></title>
<% end %>
<div class="h-full py-10 bg-gray-50 md:py-24">
  <div class="container max-w-md p-6 mx-auto bg-white dark:bg-gray-100 dark:border dark:border-gray-300/25 rounded-lg shadow sm:py-8">
    <div class="text-lg font-semibold sm:text-xl">
      <%= t(".heading", school_name: presenter.school_name) %>
    </div>
    <%= form_with(url: user_session_path, method: :post, local: true) do |f| %>
      <div class="mt-6">
        <label
          class="inline-block text-sm font-semibold tracking-wide text-gray-900" for="email">
          <%= t(".email_address") %>
        </label>
        <%= f.email_field :email, maxlength: 256, placeholder: 'john@example.com', required: true, class: 'block w-full h-10 px-4 py-2 mt-1 text-sm text-gray-800 border border-gray-300 rounded appearance-none focus:outline-none focus:bg-white focus:border-primary-400', tabindex: 1%>
      </div>
      <div class="mt-4">
        <div class="flex justify-between">
          <label
            class="inline-block text-sm font-semibold tracking-wide text-gray-900"
            for="password">
            <%= t(".password") %>
          </label>
          <a tabindex=6 href="<%= request_password_reset_path %>" class="inline text-xs font-medium text-center cursor-pointer text-primary-400 hover:text-primary-600 whitespace-nowrap hover:underline focus:underline">
            <%= t(".password_new") %>
          </a>
        </div>
        <%= f.password_field :password, placeholder: t(".type_password"), class: 'block w-full h-10 px-4 py-2 mt-1 text-sm text-gray-800 border border-gray-300 rounded appearance-none focus:outline-none focus:bg-white focus:border-primary-400', tabindex: 2, required: true %>
      </div>
      <div class="mt-3">
          <%= f.check_box :shared_device, required: false, tabindex: 3, class: "checkbox-input h-4 w-4 rounded border border-gray-300 text-primary-500 focus:ring-focusColor-500" %>
          <label class="checkbox-label ps-1.5 cursor-pointer text-xs" for="shared_device">
            <span class="text-xs"><%= t(".shared_device") %></span>
          </label>
          <span data-re-component="HelpIcon" data-re-json='<%= {children: t(".shared_device_help"), className: 'ms-2 text-xs', responsiveAlignment: 'rrc'}.to_json %>'></span>
      </div>
      <%= render 'shared/recaptcha', v2: @show_checkbox_recaptcha, action: 'user_password_login' %>
      <div class="mt-4">
        <%= f.submit t(".submit_email_and_password"), name: 'password_sign_in', data: { disable: true }, class: "w-full font-medium text-center btn btn-primary btn-large", tabindex: 4 %>
      </div>
      <div class="mt-8 text-center">
        <a href="/users/sign_in" class="text-sm p-3 font-medium underline rounded cursor-pointer text-primary-500 hover:bg-primary-50 dark:hover:bg-gray-300/50" tabindex=5>
          <% if presenter.providers.present? && presenter.oauth_host.present? %>
            <%= t(".sign_in_with_email_or_oauth") %>
          <% else %>
            <%= t(".sign_in_with_email") %>
          <% end %>
        </a>
      </div>
    <% end %>
  </div>
</div>
